<template>
    <div>
        <div
            class="search_template"
            style="background:white;height:100px;"
        >
            <div
                class="content"
                style="height: 50px; display: flex; justify-content: space-around;align-items: center;"
            ></div>
            <div align="left" style="margin-left:10px">
                <el-button
                    size="mini"
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    @click="dialogFormVisible_two = true"
                >新增</el-button>
            </div>
        </div>
        <el-container style="height: 500px; border: 1px solid #eee">
            <el-container>
                <!-- <router-view></router-view> -->
                <el-table
                    :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
                    style="width: 100%"  border
                >
                    <el-table-column align="center" label="应用类别" prop="menuName"></el-table-column>
                    <el-table-column align="center" label="创建时间" prop="createTime"></el-table-column>
                    <el-table-column label="状态" prop="isDisable" align="center"></el-table-column>
                    <!-- 	<el-table-column
		  label="角色描述"
		  prop="roleDescribe">
                    </el-table-column>-->
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" plain @click="modify_display(scope.row.id)">修改</el-button>
                            <el-button size="mini"  type="danger" plain  @click="open(scope.row.id)">禁用</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-dialog title="新增功能" :visible.sync="dialogFormVisible_two" :before-close="close">
                    <el-form
                        :model="dynamicValidateForm"
                        ref="dynamicValidateForm"
                        label-width="100px"
                        class="demo-dynamic"
                    >
                        <el-form-item
                            label="应用类型"
                            :rules="[
				  { required: true, message: '请选择应用类型', trigger: 'blur' },
				
				]"
                        >
                            <el-select v-model="value_two" placeholder="请选择">
                                <el-option
                                    v-for="item in options"
                                    :key="item.id"
                                    :label="item.typeName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            prop="typeName_modify"
                            label="应用类别"
                            :rules="[
			      { required: true, message: '请输入应用类型', trigger: 'blur' },
			    
			    ]"
                        >
                            <el-input v-model="dynamicValidateForm.typeName_modify"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="close">取消</el-button>
                        <el-button type="primary" @click="new_onSubmit(dynamicValidateForm)">确定</el-button>
                    </div>
                </el-dialog>
                <!--修改功能-->
                <el-dialog
                    title="修改功能"
                    :visible.sync="dialogFormVisible_three"
                    :destroy-on-close="true"
                >
                    <el-form
                        :model="dynamicValidateForm_modify"
                        ref="dynamicValidateForm_modify"
                        label-width="100px"
                        class="demo-dynamic"
                    >
                        <el-form-item
                            prop="typeName_modify"
                            label="应用类型"
                            :rules="[
			      { required: true, message: '请输入应用类型', trigger: 'blur' },
			    
			    ]"
                        >
                            <el-input v-model="dynamicValidateForm_modify.typeName_modify"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button
                            type="primary"
                            @click="onSubmit_modify(dynamicValidateForm_modify)"
                        >确定</el-button>
                        <el-button @click="dialogFormVisible_three = false">取消</el-button>
                    </div>
                </el-dialog>
                <!--修改功能-->
            </el-container>
        </el-container>
        <el-container style="margin-top:20px;margin-bottom:20px;float:right;margin-right:20px">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20, 40]"
                :page-size="pagesize"
                layout="total,sizes, prev, pager, next, jumper"
                :total="total_one"
            ></el-pagination>
        </el-container>
    </div>
</template>
<style>
.el-header {
    background-color: #b3c0d1;
    color: #333;
    line-height: 60px;
}

.el-aside {
    color: #333;
}
</style>

<script>
import {
    getUserInfo,
    deleteUser,
    getUserJurisdiction,
    add_role_role,
    get_role_jurisdiction,
    getModifyUserInfo,
    modify_role_role,
    get_type_list,
    get_application_display,
    modify_type_application,
    get_type_drop_down,
    add_type_application,
    prohibit_type_application,
    get_category_list,
    get_category_type_drop_down,
    add_category_application,
    display_category_application,
    modify_category_application,
    prohibit_category_application
} from '@/api/user';
export default {
    data() {
        return {
            tableData: [],
            search: '',
            dialogTableVisible: false,
            dialogFormVisible: false,
            dialogTableVisible_two: false,
            dialogFormVisible_two: false,
            dialogTableVisible_three: false,
            dialogFormVisible_three: false,
            /*****添加功能的form******/
            dynamicValidateForm: {
                typeName_modify: ''
            },
            /******添加功能的form****/
            /******修改的form*******/
            dynamicValidateForm_modify: {
                typeName_modify: ''
            },
            role_id_id: '',
            /******修改的form*******/

            data: [],
            options: [
                // options: [{
                //          value: 'M',
                //          label: '目录'
                //        }, {
                //          value: 'C',
                //          label: '菜单'
                //        }, {
                //          value: 'F',
                //          label: '按钮'
                //        }
            ],
            value_two: '',
            /****实现分页******/
            currentPage: 1,
            pagesize: 10,
            total_one: ''
            /****实现分页*****/
        };
    },

    /********获取用户列表***********/
    created() {
        this.load_jiaose_list();
        this.get_type_drop_down();
        /*******获取它的权限**********/

        /********获取它的权限*********/
        /**********获取添加角色里的权限************/
        get_role_jurisdiction()
            .then(response => {
                if (response.data.code == 200) {
                    this.data = response.data.menus;
                } else {
                    this.$message.error(response.data.msg);
                }
            })
            .catch(() => {});
        /**********获取添加角色里的权限***********/
    },
    /********获取用户列表**********/
    /**********删除功能***************/
    methods: {
        close() {
            this.$refs.dynamicValidateForm.resetFields();
            this.dialogFormVisible_two = false;
            this.value_two = '';
        },
        /******导航栏跳转功能********/
        handleSelect() {
            this.$router.push({ path: '/article' });
        },
        handleOpen(key, keyPath) {},
        handleClose(key, keyPath) {},
        /******导航栏跳转功能*********/
        open(index) {
            this.$confirm('您确定要禁用这条数据吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            })
                .then(() => {
                    /*****点击了确认*******/

                    var roleId = {
                        id: index,
                        type: 1
                    };

                    prohibit_category_application(roleId)
                        .then(response => {
                            if (response.data.code == 200) {
                                this.load_jiaose_list();
                                this.$message({
                                    message: '禁用成功',
                                    type: 'success'
                                });
                            } else {
                                this.$message.error(response.data.msg);
                            }
                        })
                        .catch(() => {});
                    /******点击了确认********/
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        /********删除功能****************/
        /**********修改功能数据回显*************/

        onSubmit() {},

        /**********修改功能数据回显*************/
        /*******树形结构********/
        renderContent(h, { node, data, store }) {
            return (
                <span class="custom-tree-node">
                    <span>{node.label}</span>
                </span>
            );
        },

        /********树形结构**********/
        /**********添加角色的功能****************/
        new_onSubmit(dynamicValidateForm) {
            this.dialogFormVisible_two = false;
            // this.$refs[dynamicValidateForm].validate((valid) => {

            /********调用新增接口***********/

            var new_add_params = {
                id: this.value_two,
                menuName: dynamicValidateForm.typeName_modify
            };
            this.value_two = '';
            this.$refs['dynamicValidateForm'].resetFields();
            add_category_application(new_add_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.load_jiaose_list();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
            /*******调用新增接口*********/
        },
        /*********添加角色的功能**************/
        /********加载角色列表********/
        load_jiaose_list() {
            var params_list = {
                pageNum: this.currentPage,
                pageSize: this.pagesize
            };
            get_category_list(params_list)
                .then(response => {
                    if (response.data.code == 200) {
                        this.tableData = response.data.data.list;
                        this.total_one = response.data.data.total;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /*******加载角色列表********/
        /**********角色修改功能*************/
        /********修改数据回显********/
        modify_display(role_id) {
            this.role_id_id = role_id;
            this.dialogFormVisible_three = true;
            var getUserInfo_params = {
                id: role_id
            };

            display_category_application(getUserInfo_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.dynamicValidateForm_modify.typeName_modify = response.data.data.menuName;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /********修改数据的回显********/
        onSubmit_modify(dynamicValidateForm_modify) {
            this.dialogFormVisible_three = false;
            // this.$refs[dynamicValidateForm].validate((valid) => {

            /********调用新增接口***********/

            var new_add_params = {
                id: this.role_id_id,
                menuName: dynamicValidateForm_modify.typeName_modify
            };
            this.$refs['dynamicValidateForm_modify'].resetFields();
            modify_category_application(new_add_params)
                .then(response => {
                    if (response.data.code == 200) {
                        this.load_jiaose_list();
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
            /*******调用新增接口*********/
        },
        /*********角色修改功能************/
        /******加载首页首页菜单下拉列表*********/
        get_type_drop_down() {
            get_category_type_drop_down()
                .then(response => {
                    if (response.data.code == 200) {
                        this.options = response.data.data;
                    } else {
                        this.$message.error(response.data.msg);
                    }
                })
                .catch(() => {});
        },
        /******加载首页首页菜单下拉列表*********/
        /*********加载分页************/
        handleSizeChange: function(size) {
            this.pagesize = size;
            this.load_jiaose_list();
        },
        handleCurrentChange: function(currentPage) {
            this.currentPage = currentPage;
            this.load_jiaose_list();
        }
        /******加载分页**************/
    }
};
</script>